@import '~components/constants.scss';

.alertComponent {
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, 0.5);
  position: absolute;
  z-index: 10;
  top: 0;
  .header {
    .close {
      background: #f2f2f2;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      line-height: 40px;
      padding: 8px;
      box-sizing: border-box;
      position: absolute;
      right: 10vh;
      top: 10vh;
      cursor: pointer;
      &:hover {
        background: #eee;
        & > * {
          opacity: 0.8;
        }
      }
      & > * {
        opacity: 0.5;
      }
    }
  }
  .alertContainer {
    width: 0px;
    height: 0px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    .component {
      background: white;
      padding: 15px;
      border-radius: $base_border_radius;
      box-shadow: $base_box_shadow;
      position: relative;
      display: inline-block;
      transform: translateX(-50%) translateY(-50%);
    }
  }
}

/* confirm component */
.confirmAlert {
  width: 300px;
  .content {
    font-size: 14px;
  }
  .bottom {
    margin-top: 10px;
    text-align: right;
    input {
      margin: 0;
      margin-left: 10px;
    }
  }
}
